import React, { useState, useEffect } from "react";
import { Carousel, Card, Avatar, Descriptions } from 'antd';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid';

export function CollegeOverviewComponent({ schoolData }) {
    const { Meta } = Card;
    const [imagesPerSlide, setImagesPerSlide] = useState(3);
    const [expandedSections, setExpandedSections] = useState({
        intro: false,
        history_culture: false,
        research: false,
        teacher_strength: false
    });
    const toggleSection = (sectionKey) => {
        setExpandedSections(prevState => ({
            ...prevState,
            [sectionKey]: !prevState[sectionKey]
        }));
    };
    useEffect(() => {
        const handleResize = () => {
            const windowWidth = window.innerWidth;

            if (windowWidth < 768) {
                setImagesPerSlide(1);
            } else if (windowWidth < 1024) {
                setImagesPerSlide(2);
            } else {
                setImagesPerSlide(3);
            }
        };

        handleResize();
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
    const rankStyle = {
        backgroundImage: "url()",
        minWidth: '27px',
        height: '26px',
        lineHeight: '26px',
        backgroundSize: 's',
        textAlign: 'center',
        fontSize: '14px',
        color: '#834400',
    }
    return (
        schoolData.length !== 0 ? <div className="mt-10">
            <h2 className="text-2xl font-bold mb-4">院校概览</h2>
            <p className="leading-7 mb-8 text-base indent-8 text-gray-600">
                {expandedSections.intro ? schoolData.intro_school : `${schoolData.intro_school.substring(0, 100 * imagesPerSlide)}...`}
            </p>
            {
                schoolData.intro_school.length > 100 * imagesPerSlide &&
                <p className="flex justify-end cursor-pointer text-right text-blue-500 hover:text-blue-400 transition-colors duration-200" onClick={() => toggleSection('intro')}>
                    {expandedSections.intro ? "收起" : "展开"}
                    {expandedSections.intro ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
                </p>
            }



            <h2 className="text-2xl font-bold mb-4">院校排名</h2>
            <div className="flex justify-center md:justify-start">
                <Card className="p-2 mb-8 border rounded-lg text-base shadow-sm w-4/5 lg:w-1/3 md:ml-10">
                    <div className="flex justify-between mb-2">
                        <span className="font-semibold">总排名</span>
                        <span style={rankStyle}>
                            {schoolData.rank_all.replace(' / 2900', '')}
                        </span>
                    </div>
                    <div className="flex justify-between mb-2">
                        <span className="font-semibold">校友会排名</span>
                        <span style={rankStyle}>
                            {schoolData.rank.xyhRank}
                        </span>
                    </div>
                    <div className="flex justify-between mb-2">
                        <span className="font-semibold">武书连排名</span>
                        <span style={rankStyle}>
                            {schoolData.rank.wslRank}
                        </span>
                    </div>
                    <div className="flex justify-between">
                        <span className="font-semibold">软科排名</span>
                        <span style={rankStyle}>
                            {schoolData.rank.rkRank}
                        </span>
                    </div>

                </Card>
            </div>

            <h2 className="text-2xl font-bold mb-4">学生与奖励</h2>
            <div className="flex justify-center md:justify-start">
                <Card className="p-2 mb-8 border rounded-lg text-base shadow-sm w-4/5 md:ml-10">
                    <div className="grid lg:grid-cols-3 gap-2 md:gap-6 xl:gap-10 text-gray-600">
                        <div>
                            <div className="font-semibold text-black mb-3">在校生数据</div>
                            <div className="flex justify-between mb-2">
                                <span className="font-medium font-gray-800">国际学生人数</span>
                                <span>
                                    {schoolData.num_stu_intl}
                                </span>
                            </div>
                            <div className="flex justify-between mb-2">
                                <span className="font-medium font-gray-800">本科生数量</span>
                                <span>
                                    {schoolData.num_stu_undergraduate}
                                </span>
                            </div>
                            <div className="flex justify-between">
                                <span className="font-medium mb-2 font-gray-800">研究生数量</span>
                                <span>
                                    {schoolData.num_stu_graduate}
                                </span>
                            </div>
                        </div>
                        <div>
                            <div className="font-semibold text-black mb-3">在校生数据</div>
                            <div className="flex justify-between">

                                <span className="font-medium font-gray-800">国家奖学金受益人数</span>
                                <span>
                                    {schoolData.num_scholarship}
                                </span>
                            </div>
                        </div>
                        <div>
                            <div className="font-semibold text-black mb-3">男女比例</div>
                            <div className="flex border rounded-full h-2">
                                <div
                                    style={{ flex: schoolData.ratio_male }}
                                    className="bg-blue-500 text-white text-center rounded-l-full"
                                >
                                </div>

                                <div
                                    style={{ flex: 100 - schoolData.ratio_male }}
                                    className="bg-[#fd495e] text-white text-center rounded-r-full"
                                >
                                </div>

                            </div>
                            <div className="flex justify-between items-center mt-2">
                                <div className="text-left text-blue-500 text-lg font-bold">男<div className="inline text-2xl ml-2">{schoolData.ratio_male}%</div></div>
                                <div className="text-center">男女比例</div>
                                <div className="text-right text-[#fd495e] text-lg font-bold"><div className="inline text-2xl mr-2">{100 - schoolData.ratio_male}%</div>女 </div>
                            </div>
                        </div>
                    </div>
                </Card >
            </div >

            <h2 className="text-2xl font-bold mb-4">师资力量</h2>
            <div className="text-base mb-8 text-gray-600 ml-2">
                {
                    schoolData.teacher_strength.map((item, index) => (
                        <div key={index} className="mt-2">
                            <span className="font-semibold text-gray-800">{item.title}</span>
                            {
                                typeof item.content === 'string' ? (
                                    <>
                                        <br />
                                        <p className="indent-4">
                                            {expandedSections.teacher_strength ? item.content : `${item.content.substring(0, 100 * imagesPerSlide)}...`}
                                        </p>
                                        {item.content.length > 100 * imagesPerSlide &&
                                            <p className="flex justify-end cursor-pointer text-right text-blue-500 hover:text-blue-400 transition-colors duration-200" onClick={() => toggleSection('teacher_strength')}>
                                                {expandedSections.teacher_strength ? "收起" : "展开"}
                                                {expandedSections.teacher_strength ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
                                            </p>
                                        }
                                    </>
                                ) : (
                                    item.content.map((content, contentIndex) => (
                                        <div key={contentIndex} className="w-5/6 lg:w-1/2 xl:w-1/3 flex justify-between">
                                            <span className="font-medium indent-4">{content.title}</span>
                                            <span>{content.value}</span>
                                        </div>
                                    ))
                                )
                            }
                        </div>
                    ))
                }
            </div>

            <h2 className="text-2xl font-bold mb-4">院校风采</h2>
            <Carousel autoplay className="mb-8">
                {(() => {
                    const totalImages = schoolData.img_urls.length;
                    const slides = [];
                    for (let i = 0; i < totalImages; i += imagesPerSlide) {
                        slides.push(
                            <div key={i}>
                                <div className="flex justify-center items-center gap-4">
                                    {schoolData.img_urls.slice(i, i + imagesPerSlide).map((img_url, innerIndex) => (
                                        <img
                                            key={innerIndex}
                                            src={img_url}
                                            alt={`Image ${innerIndex}`}
                                            className="object-cover h-40 lg:h-56"
                                        />
                                    ))}
                                </div>
                            </div>
                        );
                    }
                    return slides;
                })()}
            </Carousel>

            <h2 className="text-2xl font-bold mb-4">优势专业</h2>
            <table className="table-auto border-collapse w-full mb-8">
                <thead>
                    <tr className="bg-gray-100">
                        <th className="border px-4 py-2">学科建设</th>
                        <th className="border px-4 py-2">学科名单</th>
                    </tr>
                </thead>
                <tbody>
                    {schoolData.dominant_pro.map((item, index) => (
                        <tr key={index} className="hover:bg-gray-50">
                            <td className="border px-4 py-2 whitespace-nowrap">{item.title}</td>
                            <td className="border px-4 py-2">{item.content.substring(0, item.content.length * imagesPerSlide / 3 + 1)}</td>
                        </tr>
                    ))}
                </tbody>
            </table>

            <h2 className="text-2xl font-bold mb-4">科研机构</h2>
            <table className="table-auto border-collapse w-full mb-8">
                <thead>
                    <tr className="bg-gray-100">
                        <th className="border px-4 py-2">学科建设</th>
                        <th className="border px-4 py-2">学科名单</th>
                    </tr>
                </thead>
                <tbody>
                    {schoolData.scientific_institution.laboratory.map((item, index) => (
                        <tr key={index} className="hover:bg-gray-50">
                            <td className="border px-4 py-2 whitespace-nowrap">{item.project}</td>
                            <td className="border px-4 py-2">{item.details.slice(0, imagesPerSlide / 3 * item.details.length + 1).join(', ')}</td>
                        </tr>
                    ))}
                </tbody>
            </table>


            <h2 className="text-2xl font-bold mb-4">历史文化</h2>
            <div className="mb-8 text-base text-gray-800 ml-2">
                <p className="mb-2"><strong>建校时间 :</strong> {schoolData.history_culture.year}</p>
                <p className="mb-2"><strong>校庆日期 :</strong> {schoolData.history_culture.date}</p>
                <p className="mb-2"><strong>校训 :</strong> {schoolData.history_culture.motto}</p>
                <p className="mb-2"><strong>历史文化 :</strong></p>
                {
                    expandedSections.history_culture ? (
                        schoolData.history_culture.culture.map((item, index) => (
                            <p key={index} className="mb-2 indent-8 text-gray-600">{item}</p>
                        ))
                    ) : (
                        schoolData.history_culture.culture.slice(0, imagesPerSlide * 2).map((item, index) => (
                            <p key={index} className="mb-2 indent-8 text-gray-600">{item}</p>
                        ))
                    )
                }
                <p className="flex justify-end cursor-pointer text-right text-blue-500 hover:text-blue-400 transition-colors duration-200" onClick={() => toggleSection('history_culture')}>
                    {expandedSections.history_culture ? "收起" : "展开"}
                    {expandedSections.history_culture ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
                </p>
            </div>

            <h2 className="text-2xl font-bold mb-4">知名校友</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> {/* 创建了grid容器 */}
                {
                    expandedSections.research ? (
                        schoolData.famous_alumni.map((item, index) => (
                            <Card
                                key={index}
                                className="w-full mb-2 border-none"
                            >
                                <Meta
                                    avatar={<Avatar className="scale-150 mt-3 mr-4">{item.name[0]}</Avatar>}
                                    title={item.name}
                                    description={item.intro}
                                />
                            </Card>
                        ))
                    ) : (
                        schoolData.famous_alumni.slice(0, imagesPerSlide * 4).map((item, index) => (
                            <Card
                                key={index}
                                className="w-full mb-2 border-none"
                            >
                                <Meta
                                    avatar={<Avatar className="scale-150 mt-3 mr-4">{item.name[0]}</Avatar>}
                                    title={item.name}
                                    description={item.intro}
                                />
                            </Card>
                        ))
                    )
                }
            </div>
            {
                schoolData.famous_alumni.length > imagesPerSlide * 4 &&
                <p className="flex justify-end cursor-pointer text-right text-blue-500 hover:text-blue-400 transition-colors duration-200" onClick={() => toggleSection('research')}>
                    {expandedSections.research ? "收起" : "展开"}
                    {expandedSections.research ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
                </p>
            }
        </div > : <></>
    );
}
